<template>
	<view>
		<view class="header">
			<text @click="back" class="iconfont icon-xiangzuojiantou"> 收货地址</text>
			<text @click="queren">确定</text>
		</view>
		<view class="content">
			<view class="cItem">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<radio  :checked="index === current" />
						</view>
						<view>
							<view>
								<view>{{xiangqing.ryshpe}}</view>
								<view>{{xiangqing.ryshtel}} <text style="color: red;" class="iconfont icon-jianqu"></text></view>
							</view>
							<view>{{xiangqing.tzdz}}</view>
						</view>
						<view>
							<text @click.stop="edit" class="iconfont icon-yijianfankui"></text>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="btn">
			<button type="warn" @click="add">新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,computed,onMounted,watch} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive({
				current: 1,
				radioChange: function(evt) {
					for (let i = 0; i < this.items.length; i++) {
						if (this.items[i].value === evt.detail.value) {
							this.current = i;
							break;
						}
					}
				},
				xiangqing:computed(()=>state.ptdingdan.xiangqing),
				queren(){
					console.log('确认')
				},
				edit(){
					console.log('编辑')
					uni.navigateTo({
						url: '/pages/ptxgdizhi/ptxgdizhi'
					});
				},
				add(){
					console.log('新增收货地址！')
					uni.navigateTo({
						url: '/pages/ptxzdizhi/ptxzdizhi'
					});
				},
				back(){
					uni.redirectTo({
						url: '/pages/ptquerendingdan/ptquerendingdan'
					});
				}
			})
			return {...toRefs(data)}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.header{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		justify-content: space-between;
		>text:nth-child(2){
			color: red;
		}
	}
	.cItem{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		>radio-group{
			>label:not(:first-child){
				margin-top: 30rpx;
			}
			>label{
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view{
					radio{
						transform: scale(0.7);
					}
				}
				>view:nth-child(2){
					flex: 1;
					padding-left: 20rpx;
					view:nth-child(1){
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
						view:nth-child(2){
							padding-right: 150rpx;
						}
					}
				}
			}
		}
	}
	.btn{
		text-align: center;
		margin-top: 40rpx;
		button{
			width: 370rpx;
			font-size: 16px;
		}
	}
</style>
